<template>
  <div style="">
    <Header :left="true" leftText="返回" title="实际用工-查询明细"> </Header>
    <van-field
      readonly
      autosize
      label="查询条件"
      placeholder=""
      class="formstyle"
    />
    <Form :style="autoHeight">
      <van-field
        label="部门名称"
        :value="companyname"
        readonly
        class="formstyle"
      />

      <van-cell
        title="日期选择"
        class="formstyle"
        required
        placeholder="请选择日期"
        is-link
        :value="form.planworkdatetime"
        @click="showdate = true"
      />
      <van-calendar
        :min-date="minDate"
        color="#1989fa"
        v-model="showdate"
        @confirm="onConfirm"
      />

      <van-field
        readonly
        required
        label="班次选择"
        placeholder=""
        class="formstyle"
      />
      <van-radio-group
        title="班次选择"
        v-model="form.pshiftid"
        direction="horizontal"
      >
        <van-radio name="1" checked-color="#138087" class="radioteam">白班</van-radio>
        <van-radio name="2" checked-color="#138087" class="radioteam">夜班</van-radio>
        <van-radio name="3" checked-color="#138087" class="radioteam">中班</van-radio>
        <van-radio name="4" checked-color="#138087" class="radioteam">转班(白)</van-radio>
        <van-radio name="5" checked-color="#138087" class="radioteam">转班(夜)</van-radio>
      </van-radio-group>
    </Form>

    <div style="margin-top: 10px; margin-bottom: 10px">
      <van-button type="info" class="buttongroup" @click="createdata" color="#138087"
        >新增</van-button
      >
      <van-button type="primary" class="buttongroup" @click="querydata" color="#2a5caa"
        >查询</van-button
      >
    </div>

    <!-- <div class="textScroll"> -->
      <div v-for="(item, index) in items" :key="item.id">
          <van-cell 
          icon="circle"
          style="font-weight: bold;font-size:17px"
          :value="`日期:${item.planworkdatetime} 班次:${item.pshiftid} 实际用工人数:${item.factworksused}(人) 实际用工工时:${item.workhour}(H)`"
          @click="modifydata(`${item.id},${item.planworkdatetime},${item.pshiftid},${item.factworksused},${item.workhour}`)"
          />
        </div>
      </div>
    <!-- </div> -->

  </div>
</template>

<script>
import {
  Col,
  Row,
  Form,
  Cell,
  Icon,
  Field,
  NumberKeyboard,
  Image as VanImage,
  Picker,
  popup,
  SubmitBar,
  Button,
  Loading,
  Overlay,
  Dialog,
  Toast,
  NoticeBar,
  Tag,
  DatetimePicker,
  ImagePreview,
  CellGroup,
  Uploader,
  Cascader,
  Calendar,
  RadioGroup,
  Radio,
  Divider,
  Stepper,
  AddressList,
  Checkbox,
  CheckboxGroup,
} from "vant";

import "vue-easytable/libs/themes-base/index.css";
import { VTable } from "vue-easytable";
import { _httpClient } from "@/libs/api";
import { getToken, getBaseApiFrefix } from "@/libs/auth";
import Header from "@/components/header.vue";
import { storage } from "@/libs/utils";

Vue.use(Field);
Vue.use(Overlay);
Vue.use(Loading);
Vue.use(Picker);
Vue.use(popup);
Vue.use(SubmitBar);
Vue.use(VanImage);
Vue.use(DatetimePicker);
Vue.use(Cascader);
Vue.use(Calendar);
Vue.use(Cell);
Vue.use(RadioGroup);
Vue.use(Radio);
Vue.use(Divider);
Vue.use(Stepper);
Vue.use(Button);
Vue.use(AddressList);
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
Vue.use(Col);
Vue.use(Row);

export default {
  name: "queryactuallabor",
  components: {
    Row,
    Col,
    Button,
    Header,
    Form,
    Cell,
    Icon,
    Field,
    NumberKeyboard,
    Dialog,
    Toast,
    NoticeBar,
    Row,
    Tag,
    popup,
    DatetimePicker,
    ImagePreview,
    CellGroup,
    Uploader,
    Col,
    Calendar,
    Cascader,
    Picker,
    RadioGroup,
    Radio,
    Divider,
    Stepper,
    VTable,
    AddressList,
    Checkbox,
    CheckboxGroup,
  },
  data() {
    return {
      checked: false,
      result: [],
      items: [], //查询数据项
      date: "",
      showdate: false,
      companyname: "",
      minDate: new Date(2021, 12, 1),
      form: {
        companyid: "",
        planworkdatetime: "",
        pshiftid: "1",
        workertype: "CZ",
      },
      radioOption: {
        // 行选择改变事件
        selectedRowChange: ({ row }) => {
          console.log(row);
        },
      },
    };
  },

  created: function () {
    //console.log("Hello");
    this.user = JSON.parse(storage.get("user"));
    var myDate = new Date();
    this.form.planworkdatetime =
      myDate.getFullYear() +
      "-" +
      (myDate.getMonth() + 1) +
      "-" +
      myDate.getDate();
    this.companyname = this.user.dept.deptName;
    this.form.companyid = this.user.dept.deptId;
  },
  mounted() {},

  methods: {
    toggle(index) {
      alert(this.$refs.checkboxes[index].toggle());
    },
    select(i) {
      if (this.items[i].checked) {
        this.items[i].checked = false;
      } else {
        this.items[i].checked = true;
      }
    },
    async querydata() {
      let _this = this;
      if (_this.form.planworkdatetime == "") {
        Toast.fail("请选择日期");
        return;
      }
      Toast.loading({
        mask: true,
        forbidClick: true,
        duration: 0,
        message: "请稍等...",
      });
      try {
        let res = await _httpClient.post(
          _httpClient.getApiPrefix() + "/app/manhourfact/actuallabor/query",
          {
            body: {
              companyid: _this.form.companyid,
              planworkdatetime: _this.form.planworkdatetime,
              pshiftid: _this.form.pshiftid,
              workertype: _this.form.workertype,
            },
          }
        );
        if (res.code === 200) {
          Toast.clear();
          _this.items = res.rows;
          Toast.success("查询完成");
        }
      } catch (e) {
        Toast.fail(JSON.stringify(e));
      }
    },
    createdata() {
      this.$ac.openWin({
        name: "manhourfact-actuallabor",
        url: "./manhourfact-actuallabor.html",
      });
    },
    modifydata(id) {
      this.items = [];
      this.$ac.openWin({
        name: "manhourfact-modifyactuallabor",
        url: "./manhourfact-modifyactuallabor.html",
        pageParam: {
          id: id,
        },
      });
    },
    formatDate(date) {
      return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
    },
    onConfirm(date) {
      this.showdate = false;
      this.form.planworkdatetime = this.formatDate(date);
    },
  },
};
</script>

<style>
body {
  background-color: white;
}
.table-title-class {
  background-color: #304156;
  color: #fff;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.buttongroup {
  float: right;
  margin-right: 10px;
  margin-top: 10px;
  margin-bottom: 20px;
}
.container.dwo {
  display: flex;
  justify-content: center;
  align-items: center;
}
.buttonLeft {
  position: fixed;
  bottom: 8px;
  float: left;
  width: 49%;
}
.formstyle {
  font-size: 15px;
  font-weight: bold;
  display: flex;
  align-items: center;
}
.radioteam {
  display: flex;
  align-items: center;
  padding-left: 13px;
  margin-top: 10px;
  margin-left: 34px;
  margin-bottom: 10px;
}
.buttonRight {
  position: fixed;
  bottom: 8px;
  float: right;
  left: 51%;
  width: 49%;
  background-color: #f22028;
  border-color: #f22028;
}
.textScroll {
  display: inline-block;
  position: fixed;
  top: 50%;
  bottom: 3rem;
  overflow: scroll;
  right: 10px;
  width: 100%;
  z-index: 1;
}
.message {
  font-size: 15px;
  margin-top: 5px;
  margin-left: -10px;
  font-weight: bold;
}
.mg5 {
  margin-right: 5px;
}
.tag_margin {
  margin: 2px 5px;
}
.card_under {
  height: 100%;
  width: 100%;
  margin: auto;
  background: #ffffff;
  border-radius: 25px;
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.3);
}
.card_icon {
  text-align: center;
  /* position: absolute; */
  height: 8rem;
  width: 80%;
  margin: 12% 10%;
  background: rgba(35, 180, 237, 1);
  border-radius: 25px;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.3);
}
.text {
  font-size: 18px;
  color: #4e4a67;
  margin: 8px auto auto 20px;
  line-height: 1.5rem;
  text-align: justify;
  font-weight: 600;
}
.text_small {
  font-size: 16px;
  color: red;
  margin: 8px auto auto 20px;
  line-height: 1.5rem;
  text-align: justify;
  font-weight: 700;
}
.text_scan {
  font-size: 16px;
  color: #4e4a67;
  margin: auto auto auto 20px;
  line-height: 1.5em;
  text-align: justify;
}
.divStyle {
  margin-left: 3px;
  margin-right: 3px;
}
</style>
